<script setup lang="ts">
import { inject, onMounted, ref } from "vue";
import dayjs from "dayjs";

import { DATE_TIME_FORMAT } from "@/const";
import { CongestionType } from "@/const/enum";
import { junctionCongestionList } from "@/services/dashborad";
import { SYMBOL_MAP_TOOL_PROVIDER } from "@/const/symbol";

const { setCenter } = inject<any>(SYMBOL_MAP_TOOL_PROVIDER);

const table = ref();
const tableData = ref([]);
const sortingCol = ref(null);

onMounted(async () => {
    const result = (await junctionCongestionList({
        currentTime: dayjs().format(DATE_TIME_FORMAT),
    })) as any;
    if (result?.length > 0) {
        tableData.value = result.slice(0, 6);
        // table.value?.sort('congestion', 'descending')
    }
});

function onSortChange(e: any) {
    if (e.prop && e.order) {
        sortingCol.value = e.prop;
    } else {
        sortingCol.value = null;
    }
}

function delayFormatter(_: any, __: any, cellValue: any, ___: number) {
    return cellValue || 0;
}

function handleRowClick(row: any) {
    setCenter(row.location);
}

function vRoll(el: any) {
    if (!el) return;
    if (el.getBoundingClientRect()?.width < el.scrollWidth) {
        el.classList.add("rolling");
    } else {
        el.classList.remove("rolling");
    }
}
</script>

<template>
    <div>
        <h4>
            <img src="../../../assets/icon_double_arrow.png" />
            <span>路口拥堵排名</span>
        </h4>
        <div style="width: 20px"></div>
        <el-table
            ref="table"
            class-name="table"
            :data="tableData"
            size="small"
            row-class-name="row"
            :header-row-class-name="'row-header'"
            cell-class-name="cell"
            :cell-style="{ background: 'transparent' }"
            :header-cell-style="{ backgroundColor: 'rgba(255,255,255,0.17)' }"
            style="width: 100%"
            @sort-change="onSortChange"
            @row-click="handleRowClick"
        >
            <el-table-column
                :width="40"
                align="center"
                prop="order"
                label="排行"
            >
                <template #default="scope">
                    <img
                        v-if="scope.$index === 0"
                        class="icon-rank"
                        src="../../../assets/icon_rank_1.png"
                    />
                    <img
                        v-else-if="scope.$index === 1"
                        class="icon-rank"
                        src="../../../assets/icon_rank_2.png"
                    />
                    <img
                        v-else-if="scope.$index === 2"
                        class="icon-rank"
                        src="../../../assets/icon_rank_3.png"
                    />
                    <span v-else>
                        {{ scope.$index + 1 }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="name" label="干线名称">
                <template #default="scope">
                    <span v-roll class="roll-container">
                        <span>{{ scope.row.name }}</span>
                    </span>
                </template>
            </el-table-column>
            <el-table-column
                :width="80"
                :label-class-name="sortingCol === 'congestion' ? 'sorting' : ''"
                sortable
                class-name="congestion-row"
                align="center"
                prop="congestion"
                label="拥堵指数"
            >
                <template #default="scope">
                    <span
                        class="tag severe-congestion"
                        :class="{
                            severe: scope.row.congestion > 2.5,
                            general:
                                scope.row.congestion > 1.8 &&
                                scope.row.congestion <= 2.5,
                            slow:
                                scope.row.congestion > 1.5 &&
                                scope.row.congestion <= 1.8,
                            unimpeded: scope.row.congestion <= 1.5,
                        }"
                        ><span>{{ scope.row.congestion }}</span></span
                    >
                </template>
            </el-table-column>
            <!-- @ts-ignore -->
            <el-table-column
                sortable
                :width="80"
                class-name="delay-col"
                :label-class-name="
                    sortingCol === 'avgDelay' ? 'sorting' : 'not-sorting'
                "
                align="center"
                prop="avgDelay"
                :formatter="delayFormatter"
                label="车辆延误"
            />
            <el-table-column
                :width="66"
                align="center"
                prop="congestionType"
                label="拥堵类型"
            >
                <template #default="scope">
                    <span class="type">
                        <span>{{
                            CongestionType[scope.row.congestionType] ||
                            CongestionType[1]
                        }}</span>
                        <!-- <img v-if="scope.row.congestionType === 2" src="../../../assets/icon_arrow_upwards.png" /> -->
                        <!-- <img v-else-if="scope.row.congestionType === 3" src="../../../assets/icon_arrow_downwards.png" /> -->
                    </span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<style lang="scss" scoped>
h4 {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    color: #c5fbff;
    > img {
        width: 18px;
        width: 19px;
        margin-right: 4px;
    }
}

.table {
    --el-table-tr-bg-color: transparent;
    --el-table-header-bg-color: transparent;
    --el-table-bg-color: transparent;
    --el-table-border-color: transparent;
    --el-table-header-text-color: #fff;
    --el-table-text-color: #fff;

    font-size: 14px;

    :deep(.el-table__row) {
        height: 38px;
    }

    :deep(.row) {
        height: 32px;
        cursor: pointer;
    }

    :deep(.cell) {
        --el-color-primary: #31f7ff;

        padding: 0;
    }

    :deep(.congestion-row .cell) {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    :deep(.sorting),
    :deep(.delay-col) {
        color: #31f7ff;
    }

    :deep(.not-sorting) {
        color: #fff;
    }

    .icon-rank {
        width: 20px;
        height: 24px;
        vertical-align: bottom;
    }

    .tag {
        border-radius: 4px;
        border-width: 1px;
        border-style: solid;
        line-height: 20px;
        span {
            width: 3em;
            display: inline-block;
            text-align: center;
        }
        &.severe {
            color: #ff0404;
            border-color: #ff0404;
            background: rgba(255, 47, 47, 0.2);
        }
        &.general {
            color: #ff606b;
            border-color: #ff606b;
            background: rgba(255, 96, 107, 0.2);
        }
        &.slow {
            color: #ff7a3e;
            border-color: #ff7a3e;
            background: rgba(255, 158, 60, 0.2);
        }
        &.unimpeded {
            color: #4bf99b;
            border-color: #4bf99b;
            background: rgba(75, 249, 155, 0.2);
        }
    }

    .type {
        display: inline-flex;
        align-items: center;
        img {
            width: 14px;
            height: 14px;
            margin-left: 2px;
        }
    }
}

.roll-container {
    --animation-duration: 5s;

    display: inline-block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;

    &.rolling {
        span {
            display: inline-block;
            padding-left: 100%;
            animation: marquee var(--animation-duration) linear infinite;
        }
    }
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}
</style>
